<template>
  <div>
    <div class="infortop">
      <div class="in_1">
        <img :src='"https://elm.cangdu.org/img/"+orr[0]'
             alt="">
      </div>
      <div class="in_2">
        支付超时
      </div>
      <div @click="again"
           class="in_3">
        再来一单

      </div>
    </div>
    <div class="informid">
      <div class="infor1">
        <div class="infor11">
          <div class="infor111">

            <img :src='"https://elm.cangdu.org/img/"+orr[0]'
                 alt="">
          </div>
          <div class="infor112">
            {{orr[1]}}
          </div>
        </div>

        <div class="infor13">
          箭头
        </div>
      </div>

      <div class="infor2"
           v-for="(item,index) in orr[3]"
           :key="index">
        <div class="infor21">
          {{orr[3][index].name}}
        </div>
        <div class="infor22">× {{orr[3][index].num}}</div>
        <div class="infor23">￥ {{orr[3][index].price}}</div>
      </div>
      <!-- <div class="infor3">
        <div class="infor31">
          带我去-默认
        </div>
        <div class="infor32">×1</div>
        <div class="infor33">￥20</div>
      </div> -->

      <div class="infor4">
        <div class="infor41">配送费</div>
        <div class="infor42">{{img.piecewise_agent_fee.tips}}</div>
      </div>
      <div class="infor5">实付{{orr[2]}}.00</div>
    </div>

    <div class="inforbot">
      <div class="arr">
        <div class="arr1">配送信息</div>
        <div class="arr2">送达时间:尽快送达</div>
        <div class="arr3">
          <div class="arr31">
            送货地址：
          </div>
          <div class="arr32">
            <div class="arr321">
              {{name1}}
            </div>
            <div class="arr322">
              {{tel}}
            </div>
          </div>
        </div>
        <div class="arr4">配送方式：蜂鸟专送</div>
      </div>
    </div>
    <div class="odd">
      <div class="odd1">订单信息</div>
      <div class="odd2">订单号：21162</div>
      <div class="odd3">支付方式：在线支付</div>
      <div class="odd4">下单时间：{{time}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Indent_infor',
  data () {
    return {
      orr: JSON.parse(localStorage.getItem('apple')),
      img: JSON.parse(localStorage.getItem('img')),
      name1: localStorage.getItem('name'),
      tel: localStorage.getItem('tel'),
      time: localStorage.getItem('times'),
      srr: []
    }
  },
  methods: {
    again () {
      this.$router.push({ name: 'Shopinfor' })
    }
  },
  created () {
    console.log('取出')
    
   console.log(JSON.parse(localStorage.getItem('apple')))
  }
}
</script>

<style>
.infor112 {
  font-size: 19px;
  font-weight: 700;
  margin-left: 10px;
}
.arr,
.odd {
  font-size: 16.8px;
  color: #666666;
}
.arr1,
.odd1 {
  font-size: 19px;
  color: #333333;
}
.odd1,
.odd2,
.odd3,
.odd4,
.arr1,
.arr2,
.arr4 {
  height: 51px;
  display: flex;
  align-items: center;
}
.arr3 {
  display: flex;
}
.infor22,
.infor32 {
  margin-right: -160px;
  color: #ccc;
}
.infor31,
.infor21 {
  width: 100px;
}
.infor1,
.infor3,
.infor4,
.arr1,
.odd1 {
  border-bottom: 1px solid #f5f5f5;
}
.infor5 {
  text-align: right;
  color: #fb6b23;
  font-weight: 700;
  line-height: 4;
}
.infor2,
.infor3,
.infor4,
.infor5 {
  height: 51px;
}
.infor1,
.infor11,
.infor2,
.infor3,
.infor4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.infor11 img {
  width: 31px;
  height: 31px;
}
.odd {
  margin-bottom: 150px;
}
.informid,
.arr,
.odd {
  background-color: white;
  margin-top: 15px;
  padding: 10px;
  box-sizing: border-box;
}
.in_1 img {
  width: 81px;
  border-radius: 50%;
  height: 81px;
  border: 1px solid #3190e8;
}
.in_2 {
  margin-top: 10px;
  font-size: 23px;
  font-weight: 700;
}
.infortop {
  background-color: white;
  height: 210px;
  text-align: center;
  padding-top: 15px;
  box-sizing: border-box;
}
.in_3 {
  font-size: 15.5px;
  text-align: center;
  border-radius: 3px;
  box-sizing: border-box;
  padding-top: 3px;
  color: #3190e8;
  border: 1px solid #3190e8;
  width: 86.7px;
  height: 30px;
  margin: 0 auto;
  margin-top: 15px;
}
body {
  background-color: #f5f5f5;
}
</style>